<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <App></App>
        </div>
        <script type="text/javascript" src="./vue.js"></script>
        <script type="text/javascript">

            /*
            beforeCreate
            created
            beforeMount
            mounted
            beforeUpdate
            updated
            activated
            deactivated
            beforeDestroy
            destroyed
            errorCaptured
            */

            Vue.component('Test', {
                data() {
                    return {
                        msg: 'hello world'
                    }
                },
                template: '' +
                    '<div>' +
                    '<div>{{msg}}</div>' +
                    '<button @click="changeHandler">改变</button>' +
                    '</div>',
                methods: {
                    changeHandler() {
                        this.msg = this.msg + "哈哈";
                    }
                },
                beforeCreate: function () {
                    //组件创建之前
                    console.log(this);
                    console.log(this.msg)
                },
                created: function () {
                    //组件创建之后
                    console.log(this.msg)
                    //使用该组件就会调用created方法
                    //在created方法中可以操作后端的数据，数据驱动视图
                    //应用：发起ajax请求
                },
                beforeMount: function () {
                    //挂载数据到dom之前会调用
                    console.log(document.getElementById("app"))
                },
                mounted: function () {
                    //挂载数据到dom之后会调用，Vue作用以后的dom 操作dom
                    console.log(document.getElementById("app"))
                },
                beforeUpdate: function () {
                    //在更新dom之前 调用该钩子，应用:可以获取原始的dom
                    console.log(document.getElementById("app").innerHTML);
                },
                updated: function () {
                    //在更新dom之前 调用该钩子，应用:可以获取最新的dom
                    console.log(document.getElementById("app").innerHTML);
                },
                beforeDestroy: function () {
                    //销毁之前
                    console.log('beforeDestroy')
                },
                destroyed: function () {
                    //被销毁
                    console.log('destroyed')
                },
                activated: function () {
                    console.log('组件被激活了')
                },
                deactivated: function () {
                    console.log('组件被停用了')
                }

            })

            var App = {
                data() {
                    return {
                        isShow: true
                    }
                },
                //vue内置组件<keep-alive></keep-alive>
                //能在组件的切换过程中将状态保存在内存中，防止重复渲染
                template: '' +
                    '<div class="app">' +
                    '<keep-alive>' +
                    '<Test v-if="isShow"/>' +
                    '</keep-alive>' +
                    '<button @click="isShow = !isShow">改变生死</button>' +
                    '</div>'
            }

            new Vue({
                el: '#app',
                data() {
                    return {}
                },
                components: {
                    App
                }
            })
        </script>
    </body>
</html>